import React, { Component } from 'react'
import { Text, View } from 'react-native'
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'

import Home from './r181/Home'
import About from './r181/About'
import Settings from './r181/Settings'
let Stack=createStackNavigator()
export default class App extends Component {
  state={current:'Home'}
  _navHome=()=>{
    this.setState({current:'Home'})
    this.nav.navigate("Home")
  }
  _navAbout=()=>{
    this.setState({current:'About'})
    this.nav.navigate("About",{user:{id:1,uname:'john'}})
  }
  _navSettings=()=>{
    this.setState({current:'Settings'})
    this.nav.navigate('Settings',{screen:'Wifi'})
  }
  render() {
    return (
      <NavigationContainer ref={ref=>this.nav=ref}>
        <Stack.Navigator>
          <Stack.Screen options={{title:"首页",headerTitleStyle:{textAlign:'center',color:'blue'}}} name="Home" component={Home}></Stack.Screen>
          <Stack.Screen name="About" component={About}></Stack.Screen>
          <Stack.Screen name="Settings" component={Settings}></Stack.Screen>
        </Stack.Navigator>
        <View style={{flexDirection:'row',justifyContent:'space-around'}}>
          <Text style={{color:this.state.current==="Home"?'red':'black'}} onPress={this._navHome}>Home</Text>
          <Text style={{color:this.state.current==="About"?'red':'black'}} onPress={this._navAbout}>About</Text>
          <Text style={{color:this.state.current==="Settings"?'red':'black'}}  onPress={this._navSettings}>Settings</Text>
        </View>
      </NavigationContainer>
    )
  }
}
